<template>
  <el-form style="display: inline-flex; flex-wrap: wrap; padding-top: 10px" label-width="10px">
    <slot name="queryForm"> </slot>
    <el-form-item>
      <el-button :size="$attrs.size" type="success" :icon="Search" :loading="queryLoading" @click="getInitDate(1)"
        >查询</el-button
      >
    </el-form-item>
    <el-form-item>
      <el-button :size="$attrs.size" :icon="Refresh" type="warning" :loading="resetLoading" @click="doReset"
        >重置</el-button
      >
    </el-form-item>
  </el-form>
  <el-form-item label-width="10px">
    <slot name="moreBtn"> </slot>
    <MyExcelExport
      v-if="url.exporturl"
      :url="url.exporturl"
      :tableHead="tableHead"
      :tableList="tableList"
      :fileName="url.exporturl.fileName"
      :wsName="url.exporturl.wsName"
    ></MyExcelExport>
  </el-form-item>
  <el-table :data="tableList" v-bind="$attrs" v-loading="tableLoading" element-loading-text="加载中">
    <el-table-column v-if="selection" type="selection" width="55" />
    <el-table-column v-if="showindex" label="序号" type="index" width="55" />
    <el-table-column v-for="(item, index) in tableHead" :key="index" v-bind="item">
      <template #default="scope">
        <slot :name="item.prop" v-bind="scope">{{ scope.row[scope.column.property] }}</slot>
        <el-table-column v-for="(item, index) in item.children" :key="index" v-bind="item">
          <template #default="scope">
            <slot :name="item.prop" v-bind="scope">{{ scope.row[scope.column.property] }}</slot>
            <el-table-column v-for="(item, index) in item.children" :key="index" v-bind="item">
              <template #default="scope">
                <slot :name="item.prop" v-bind="scope">{{ scope.row[scope.column.property] }}</slot>
                <el-table-column v-for="(item, index) in item.children" :key="index" v-bind="item">
                  <template #default="scope">
                    <slot :name="item.prop" v-bind="scope">{{ scope.row[scope.column.property] }}</slot>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <slot name="moreAction" v-bind="scope"> </slot>
        <el-button v-if="url.delUrl" link type="danger" @click="del(scope.row, column)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <my-pagination
    v-if="pagination"
    :total="total"
    v-model:page="pageNo"
    v-model:limit="pageSize"
    @pagination="getInitDate"
  />
</template>
<!-- <script setup>
import { ref } from 'vue'
const show=()=>{
  alert("我是子组件，我的show方法被调用了")
}
// 主动暴露childMethod方法
defineExpose({ show })
</script> -->
<script>
import { ElMessage } from 'element-plus'
import { Plus, Search, Refresh, Delete, Download } from '@element-plus/icons-vue'
import MyPagination from '../myPagination'
import MyExcelExport from '../myExcelExport'
import { httpGet, httpPost, httpPut, httpDel } from '/@/utils/request'
export default {
  components: { MyPagination, MyExcelExport },
  emit: ['update:queryForm'],
  setup() {
  
    return {
      Plus,
      Search,
      Refresh,
      Delete,
      Download,
    }
  },
  props: {
    url: {
      type: Object,
      required: true, //请求url对象
    },
    queryForm: {
      type: Object,
      default: () => {}, //查询条件表单
    },
    selection: {
      type: Boolean,
      default: false, //多选表格标识
    },
    showindex: {
      type: Boolean,
      default: false, //展示序号标识
    },
    pagination: {
      type: Boolean,
      default: false, //分页标识
    },
  },
  data() {
    return {
      tableLoading: false,
      queryLoading: false,
      resetLoading: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableList: [],
      tableHead: [
        {
          label: 'id',
          prop: 'id',
          sortable: true,
        },
        {
          label: 'author',
          prop: 'author',
          children: [
            {
              label: 'reviewer',
              prop: 'reviewer',
            },
            {
              label: 'image_uri',
              prop: 'image_uri',
            },
          ],
        },

        {
          label: 'timestamp',
          children: [
            {
              label: 'content_short',
              prop: 'content_short',
              children: [
                {
                  label: 'status',
                  prop: 'status',
                },
              ],
            },
            {
              label: 'forecast',
              prop: 'forecast',
            },
          ],
        },
      ],
      listQuery: {},
    }
  },
  mounted() {
    this.getInitDate()
  },
  watch: {
    queryForm: {
      handler(newValue) {
        this.listQuery = newValue
      },
      immediate: true,
    },
  },
  methods: {
    // 获取初始数据&&查询
    async getInitDate(a) {
      if (a === 1) {
        this.queryLoading = true
      }
      this.tableLoading = true
      if (this.pagination) {
        this.listQuery.pageNo = this.pageNo
        this.listQuery.pageSize = this.pageSize
        try {
          const { data } = await httpGet(this.url.listUrl)
          this.tableList = data.items
          this.total = data.total
        } catch (error) {
          console.log(error, `${this.url.listUrl}获取数据失败`)
        }
      } else {
        try {
          const { data } = await httpGet(this.url.listUrl)
          this.tableList = data.items
        } catch (e) {
          console.log(error, `${this.url.listUrl}获取数据失败`)
        }
      }
      console.log(this.listQuery, '查询条件')
      this.tableLoading = false
      if (a === 1) {
        this.queryLoading = false
      }
    },
    // 重置
    doReset() {
      this.resetLoading = true
      this.listQuery = {}
      this.pageNo = 1
      this.pageSize = 10
      this.$emit('update:queryForm', {})
      this.getInitDate()
      this.resetLoading = false
    },
    // 删除
    async del(row) {
      const result = await this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { code } = await httpDel(this.url.delUrl + row.id)
      if (code == 200) {
        ElMessage.success(`删除成功${row.id}`)
        this.getInitDate()
      }
    },
  },
}
</script>


<style lang="css" scoped>
</style>